<template>
    <div style="position: absolute;top: 50px;margin-left: 5px;"  class="scrollbar" >

        <el-row type="flex" justify="space-between">
            <div class="box">
            <el-col  v-for="o in this.num" :key="o" id="cardId" >

                <el-card >
                    <div slot="header" class="clearfix" style="font-weight: bold" @click="print(o)">
                        <span>{{model_name[o-1]}}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="open(ID,o)">删除模块</el-button>
                    </div>
                    <div  class="text item">
                        <template slot-scope="scope">
                            <p v-html='scope.row.bjnr'></p>
                        </template>
                        <div style="text-align: left;margin-left: 10px">描述:{{model_content[o-1]}}</div>
                        <div id="ddd">
                            <iframe :src="url1[o-1]" id="FrameID" scrolling="yes" frameborder="0" style="width: 100%;height: 350px;overflow-x:scroll ;overflow-y:scroll"></iframe>
                        </div>
                    </div>
                </el-card>

            </el-col>
            </div>
        </el-row>

    </div>
</template>

<script>
    import {knowlege_index_look, knowlege_model_delete} from "@/api/file";
    export default {
        name: "add",
        props: ['ID'],
        data() {
            return {
                currentDate: new Date(),
                model_id:[],
                url1: ['http://124.71.144.187:8080/findFile/f612ad3c-fefb-4354-94b8-fc54849a7b2b.html','http://124.71.144.187:8080/findFile/1d21e2ec-1963-4520-81ec-6de2e7aa19be.html'],
                num:0,
                t:0,
                u: '',
                model_name:[],
                model_content:[],
            };
        },
        methods:{
            print(o){
                console.log(o);
            },
            open(n,o) {
                console.log(o);
                console.log('lalalal');
                this.$confirm('此操作将永久删除该模块, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    // axios.delete('http://49.123.21.101:8080/knowlege_model_delete/'+n+'/'+this.model_id[o-1])
                  knowlege_model_delete('/KnowledgeProvider/knowlege_model_delete/'+n+'/'+this.model_id[o-1])
                  this.$message({
                        type: 'success',
                        message: '删除成功!',

                    });
                    this.num-=1;
                    console.log("this.model_id");
                    console.log(this.model_id[o-1]);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getUrl(n,k){
                console.log(n);
                console.log('sdsd');
                this.num=k;
                // axios.get('http://49.123.21.101:8080/knowlege_index_look/'+n).then(response => {
                  knowlege_index_look('/KnowledgeProvider/knowlege_index_look/'+n).then(response => {
                  let url1=[];
                    let model_id=[];
                    let model_name=[];
                    let model_content=[];
                    for(var o in response.data.data){// eslint-disable-line no-unused-vars
                        this.num++;
                    }
                    console.log(response.data.data);
                    for(var i=0;i<this.num;i++){
                        console.log(i+":"+response.data.data[i].model_url);
                        if(response.data.data[i].model_url!=null)
                          url1.push('http://'+response.data.data[i].model_url);
                        model_id.push(response.data.data[i].model_id);
                        model_name.push(response.data.data[i].model_name);
                        model_content.push(response.data.data[i].model_content);
                        console.log(url1[i]);
                    }
                 this.url1=url1;
                    this.model_id=model_id;
                    this.model_name=model_name;
                    this.model_content=model_content;
                    for(var j=0;j<this.num;j++){
                        console.log(j+" url:"+this.url1[j]);
                    }
                }).catch(error => {
                    console.log(error)
                })
            },

        }
    }
</script>

<style scoped>
.scrollbar{
        width: 45%;
        height: 82%;
        overflow-x: scroll;
    }
    .el-card{

        margin-bottom:20px;

    }

.box{
    height: 80%;
    width: 52%;
    /*overflow-y: auto;*/
    display: flex;
    flex-direction: column;
    position: center;
}

    .text {
        font-size: 14px;
    }


    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }


</style>
